<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员</title>
    <link rel="stylesheet" href="../fonts/element-icons.ttf">
    <link rel="stylesheet" href="../fonts/element-icons.woff">
    <link rel="stylesheet" href="../css/ele.css">
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/url.js"></script>
    <!-- <script src="../node_modules/element-ui/lib/index.js"></script> -->
    <script src="../js/ele.js"></script>
    <link rel="stylesheet" href="../css/public.css">
    <script src="../js/Mixin.js"></script>
    <script src="../js/crypto-js.min.js"></script>
    <script src="../js/aes.js"></script>
    <script src="../js/qrcode.js"></script>
    <link rel="stylesheet" href="../css/customize.css">
</head>

<body>
    <div id="app">
        <!-- 头部 -->
        <header>
            <div class="heart ng-scope" ng-controller="HeartForm">
                <div class="logo" @click="goHome">
                    <img src="../image/index/logo.png" alt="" style="width: 123px;height: 59px;margin-top: 8px;">
                    <div style="width: 1px;
            height: 24px;
            background: #333333;
            margin-top: 7%;
            margin-right: 9px;"></div>
                    <div>留学大数据，智能选校专家</div>
                </div>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="menuSelect">
                    <el-submenu index="1">
                        <template slot="title">产品</template>
                        <div class="chanpin">
                            <ul class="unav">
                                <li :class="[activenavliIndex==0?'activenavli':'']" @click="unavclcik(0)">全球院校库</li>
                                <li :class="[activenavliIndex==1?'activenavli':'']" @click="unavclcik(1)">智能选校系统</li>
                            </ul>
                            <div style="margin-left: 53px;" v-if="activenavliIndex==0">
                                <div class="ltitle"> <img src="../image/index/quanqiu.png" alt=""
                                        style="width: 26px;vertical-align: bottom;">
                                    全球院校库</div>
                                <div class="lcontent">
                                    <!-- <div> -->
                                    <ul v-for="(item,index) in headerList" :key="index">
                                        <li>{{item.name}}</li>
                                        <li v-for="i in item.universityItems" @click="qqyxkClick(item.id,i.id)">
                                            {{i.name}}院校库
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div style="margin-left: 53px;" v-if="activenavliIndex==1">
                                <div class="ltitle"> <img src="../image/index/quanqiu.png" alt=""
                                        style="width: 26px;vertical-align: bottom;">
                                    智能选校系统</div>
                                <div class="lcontent">
                                    <div>
                                        <ul>
                                            <li v-for="(i,index) in znxxxtList" :key="index" style="font-size: 12px;"
                                                @click="znxxxtSearch(i)">
                                                {{i.name}}</li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-submenu>
                    <el-menu-item index="2">会员</el-menu-item>
                    <el-menu-item index="3">套餐</a></el-menu-item>
                    <el-menu-item index="4">合作</a></el-menu-item>

                </el-menu>
                <div class="user_box" id="user_box">
                    <div v-if="isLogin">
                        <el-dropdown trigger="click">
                            <span class="el-dropdown-link">
                                <img :src="HeadImageUrl" alt=""
                                    style="width: 33px;height: 33px; vertical-align: middle;margin-right: 8px;">
                                {{nickname}}<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-user" @click.native="goUser">个人中心</el-dropdown-item>
                                <el-dropdown-item icon="el-icon-layout"
                                    @click.native="layoutLogin">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else @click="login"><img src="../image/index/user.png" alt=""
                            style="width: 22px;vertical-align: middle;"> <a href="./login.html">登录</a>/ <a
                            href="./register.html">注册</a> </div>
                </div>
            </div>
        </header>
        <div class="bgc">
            <div style="width: 45%;margin:  auto; padding: 34px 0;min-width: 850px;">
                <div class="backList" @click="goBack">
                    <img src="../image/customize/back.png" alt="">
                    返回列表
                </div>
                <img src="../image/customize/title.png" alt=""
                    style="margin-left: 50%;transform: translateX(-50%);margin-top: 8px;">
                <div class="buycontent">
                    <div style="display: flex;height: 48px;line-height: 48px;">
                        <div class="oneT">
                            <div>所属区域</div>
                        </div>
                        <div class="twoT">
                            <div>国家/地区</div>
                        </div>
                        <div class="threeT">
                            <div>全球院校库</div>
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                                @change="handleCheckAllChange">全选</el-checkbox>
                        </div>
                        <div class="fourT">
                            <div>
                                智能选校系统
                            </div><el-checkbox :indeterminate="isIndeterminate1" v-model="checkAll1"
                                @change="handleCheckAllChange1">全选</el-checkbox>
                        </div>
                    </div>

                    <div style="display: flex;">
                        <div>
                            <div v-for="(item,index) in goodspricelists" style="display: flex;align-items: center;">
                                <div class="oneC">{{item.name}}</div>
                                <div>
                                    <div v-for="(i,index1) in item.universityItems"
                                        style="display: flex;align-items: center;height: 28px;line-height: 28px;">
                                        <div class="twoC" style="width: 200px;">{{i.name}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="threeC">
                            <el-checkbox-group v-model="checkList" @change="handleprice">
                                <el-checkbox class="reserve" v-for="(item,index) in qqyxlPriceList" :label="item"
                                    :style="{'visibility':item.name==null? 'hidden':''}">
                                    {{item.price}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                        <div class="fourC">
                            <el-checkbox-group v-model="checkList1" @change="handleprice1">
                                <el-checkbox class="reserve" v-for="(item,index) in znxxkPriceList" :label="item"
                                    :style="{'visibility':item.name==null? 'hidden':''}">
                                    {{item.price}}
                                </el-checkbox>

                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="selectContent">
                        <div>
                            <div class="title">全球院校库<span>已选{{checkList.length}}项</span></div>
                            <div style="margin-top: 19px;">
                                <el-tag type="info" size="mini" closable v-for="item in checkList"
                                    style="margin-right: 8px;margin-bottom: 15px;"
                                    @close="deleteItem(item)">{{item.name}}</el-tag>
                            </div>
                            <div class="title" style="color: #57CD8C;">智能选校系统<span>已选{{checkList1.length}}项</span></div>
                            <div style="margin-top: 19px;">
                                <el-tag type="info" size="mini" closable v-for="item in checkList1"
                                    style="margin-right: 8px;margin-bottom: 15px;"
                                    @close="deleteItem1(item)">{{item.name}}</el-tag>
                            </div>
                        </div>
                        <div style="text-align: right;">
                            <div style="font-size: 12px;color: #76403F;"> 已选中 <span
                                    style="font-size: 15px;color: #F0371D;">{{checkList.length+checkList1.length}}</span>
                                项权益</div>
                            <div style="font-weight: bold;
                            font-size: 10px;
                            color: #F0371D;margin-top: 7px;">
                                ￥<span style="font-size: 27px;">{{totalPrice}}</span>
                            </div>
                            <!-- <div>
                                <div
                                    style="width: 126px;
                            height: 20px;
                            background: #FEF1EA;
                            border-radius: 3px 3px 3px 3px;margin-top: 7px;font-weight: 500;font-size: 10px;color: #D17846;text-align: center;line-height: 20px;float: right;">
                                    已减293元,仅需 6.2元/月</div>
                            </div> -->
                            <button
                                style="width: 222px;
                            height: 33px;
                            background: #FAC67D;
                            border-radius: 5px 5px 5px 5px;font-weight: 500;font-size: 13px;color: #76403F;margin-top: 7px;"
                                @click="goPay">立即支付</button>
                            <div style="margin-top: 7px;">
                                <el-checkbox v-model="agree"><span style="font-size: 10px;
                                    color: #999999;">我已阅读并同意并接受《个人订阅服务协议》</span></el-checkbox>
                            </div>
                        </div>
                    </div>

                </div>
                <div v-if="false">
                    <div style="text-align: center;">
                        <img src="../image/customize/cjwt.png" alt="" style="width: 107px;margin: 29px 0 27px;">
                    </div>
                    <el-collapse accordion>
                        <el-collapse-item v-for="i in 3" title="付费方案起售价格是多少" :name="i">
                            <div class="tip">所有付费方案的起售价格均为 ￥3,500</div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
            </div>
        </div>
        <footer>2023-2024 非攻留学大数据 版权所有 feigongdata.com 浙ICP备2024101258号-1</footer>
        <div class="dialog" v-if="pay">
            <div class="tbg">
                <div style="font-weight: 500;
                font-size: 17px;
                color: #FFF6D6;padding: 37px 0;text-align: center;">支付订单</div>
                <div class="diaText">
                    <div>
                        <p>购买详情 :</p>
                        <div>全球院校库{{checkList.length}}项，智能选校系统{{checkList1.length}}项</div>
                    </div>
                    <div>
                        <p>实付金额 :</p>
                        <div><span>￥</span>{{totalPrice}}</div>
                    </div>
                    <div>
                        <p>选择支付方式 :</p>
                    </div>
                    <div class="zf">
                        <img src="../image/customize/zfbActive.png" alt="" v-if="isZfb">
                        <img src="../image/customize/weixin.png" alt="" style="margin-left: 20px;" v-if="isZfb"
                            @click="weixnPay">
                        <img src="../image/customize/zfb.png" alt="" v-if="!isZfb" @click="zfbPay">
                        <img src="../image/customize/weixinActive.png" alt="" style="margin-left: 20px;" v-if="!isZfb">
                    </div>
                    <div class="qrcode" id="qrcode" ref="qrcode" style="margin-left: 50%;transform: translateX(-26%);"
                        v-if="!isZfb">

                    </div>
                    <!-- <iframe src="./zfb.html" frameborder="0"></iframe> -->
                    <!-- <div v-else v-html="zfbCode"></div> -->
                    <iframe v-else :srcdoc="zfbCode" frameborder="no" border="0" marginwidth="0" marginheight="0"
                        scrolling="no" width="200" height="200" style="overflow: hidden;width: 300px;
                        height: 300px;
                        transform: scale(0.4);
                        margin-top: -23%;
                        margin-left: 8%;
                        margin-bottom: -28%;">
                    </iframe>


                    <div class="btn"> <button @click="zhifuSuccess">支付完成</button> <button
                            style="background: #B0B0B0;margin-left: 20px;" @click="()=>pay=false">取消支付</button></div>
                </div>
            </div>
        </div>

    </div>
</body>
<!-- <script>
    // const qrcode = new QRCode(document.querySelector('#qrcode'), {
    //     text: "weixin://wxpay/bizpayurl?pr=Kplx6jgz3",
    //     width: 300,
    //     height: 300,
    //     colorDark: "#000",
    //     colorLight: "white",
    //     correctLevel: QRCode.CorrectLevel.H
    // });
</script> -->
<script>
    var app = new Vue({
        mixins: [myMixin],
        el: "#app",
        data() {
            return {
                isZfb: false,
                list:
                    [
                        {
                            name: '北美',
                            country: '美国',
                            qqyxk: '$58.00',
                            znxxk: '$58.00'
                        },
                        {
                            name: '北美',
                            country: '加拿大',
                            qqyxk: '$58.00',
                            znxxk: '$58.00'
                        }, {
                            name: '北美',
                            country: '加拿大',
                            qqyxk: '$58.00',
                            znxxk: '$58.00'
                        }, {
                            name: '北美',
                            country: '加拿大',
                            qqyxk: '$58.00',
                            znxxk: '$58.00'
                        }, {
                            name: '北美',
                            country: '加拿大',
                            qqyxk: '$58.00',
                            znxxk: '$58.00'
                        }, {
                            name: '北美',
                            country: '加拿大',
                            qqyxk: '$58.00',
                            znxxk: '$58.00'
                        }, {
                            name: '北美',
                            country: '加拿大',
                            qqyxk: '$58.00',
                            znxxk: '$58.00'
                        }
                    ],
                isIndeterminate: false,
                isIndeterminate1: false,
                checkAll: false,
                checkAll1: false,
                checkedCities: [],
                checkedqqyxk: false,
                agree: true,
                pay: false,
                checkList1: [],
                checkList: [],
                goodspricelists: [],
                qqyxlPriceList: [],
                znxxkPriceList: [],
                qrcode: null,
                order_id: '', //支付订单编号,
                zfbCode: '',
            }
        },
        created() {
            http('productdata/goodspricelists', 'post').then(res => {
                console.log('goodspricelists', JSON.parse(Decrypt(res.data)));
                let data = JSON.parse(Decrypt(res.data))
                this.goodspricelists = data
                for (let i of data) {
                    for (let j of i.universityItems) {
                        this.qqyxlPriceList.push(j)
                    }
                }
                for (let i of data) {
                    for (let j of i.selSchoolItems) {
                        this.znxxkPriceList.push(j)
                    }
                }

                console.log(' this.qqyxlPriceList ', this.qqyxlPriceList);
            })
        },
        mounted() {
            // this.createCode('')
        },
        computed: {
            totalPrice: {
                get() {
                    // console.log(this) //此处的this是vm
                    let num = this.checkList.reduce((pre, cur) => {
                        return pre + cur.price
                    }, 0)
                    let num1 = this.checkList1.reduce((pre, cur) => {
                        return pre + cur.price
                    }, 0)
                    console.log(num);
                    return (num + num1).toFixed(2)
                },
            }
        },
        methods: {
            goBack() {
                window.history.back();
            },
            handleCheckAllChange(val) {
                this.checkList = val ? this.checkList = this.qqyxlPriceList.filter(i => {
                    return i.name != null
                }) : []
            },
            handleCheckAllChange1(val) {
                this.checkList1 = val ? this.checkList1 = this.znxxkPriceList.filter(i => {
                    return i.name != null
                }) : []
            },
            handleprice(value) {
                console.log(111111111, value, this.checkList);
                let checkedCount = this.checkList.length;
                this.checkAll = checkedCount === this.qqyxlPriceList.filter(i => {
                    return i.name != null
                }).length;
            },
            handleprice1(value) {
                let checkedCount = this.checkList1.length;
                this.checkAll1 = checkedCount === this.znxxkPriceList.filter(i => {
                    return i.name != null
                }).length;
            },
            deleteItem(item) {
                let index = this.checkList.findIndex(i => {
                    return i.id == item.id
                })
                this.checkList.splice(index, 1)
                this.handleprice()
            },
            deleteItem1(item) {
                let index = this.checkList1.findIndex(i => {
                    return i == item
                })
                this.checkList1.splice(index, 1)
                this.handleprice1()
            },
            itemChange(e, index, index1) {
                console.log(e, index, index1);
            },
            weixnPay() {
                this.isZfb = false
                let qqyxkIds = []
                let znxxkIds = []
                qqyxkIds = this.checkList.map(i => {
                    return i.id
                })
                znxxkIds = this.checkList1.map(i => {
                    return i.id
                })
                console.log('znxxkIds', this.checkList1, znxxkIds);
                http('tradedata/goodsorder?pay_type=2', 'post', {
                    goodsIdItems: [...qqyxkIds, ...znxxkIds]
                }).then(res => {
                    console.log('wx', JSON.parse(Decrypt(res.data)));
                    let data = JSON.parse(Decrypt(res.data))
                    this.order_id = data.OrderId
                    this.$nextTick(() => {
                        this.$refs.qrcode.innerHTML = ''
                        this.createCode(data.payQrCode);
                    })
                })
            },
            zfbPay() {
                let qqyxkIds = []
                let znxxkIds = []
                qqyxkIds = this.checkList.map(i => {
                    return i.id
                })
                znxxkIds = this.checkList1.map(i => {
                    return i.id
                })
                this.qrcode = null
                this.isZfb = true
                http('tradedata/goodsorder?pay_type=1', 'post', {
                    goodsIdItems: [...qqyxkIds, ...znxxkIds]
                }).then(res => {
                    let data = JSON.parse(Decrypt(res.data))
                    this.zfbCode = data.payQrCode
                    // .split('<script>')[0]
                    console.log('this.zfbCode', this.zfbCode);
                    this.order_id = data.OrderId
                    console.log('zfb', this.zfbCode);
                    this.$nextTick(() => {
                        // this.$refs.qrcode.innerHTML = ''
                        // document.forms['alipaysubmit'].submit();
                    })
                })
            },
            createCode(text) {
                this.qrcode = new QRCode(this.$refs.qrcode, {
                    text: text,
                    width: 108,
                    height: 108,
                    colorDark: "#000",
                    colorLight: "white",
                    correctLevel: QRCode.CorrectLevel.H
                });
            },
            goPay() {
                if (!this.agree) {
                    this.$message.error('请阅读并同意并接受《个人订阅服务协议》');
                    return
                }
                if (Number(this.totalPrice) > 0) {
                    this.pay = true
                    this.weixnPay()
                } else {
                    this.$message.error('您还没有选中项');

                }
            },
            zhifuSuccess() {
                http('tradedata/orderquery?order_id=' + this.order_id, 'post').then(res => {
                    let data = JSON.parse(Decrypt(res.data))
                    console.log(data);
                    // success = 0, fail = -1, wait = 1,
                    if (data.payStatus == 0) {
                        this.$message.success('支付成功')
                        this.pay = false
                        location.href = './memberLogin.html'
                    } else if (data.payStatus == -1) {
                        this.$message.error('支付失败')
                    } else if (data.payStatus == 1) {
                        this.$message.warning('等待中...')
                    }
                })
            }
        }
    })
</script>

</html>